<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
	xmlns:fmt="http://xmlns.jcp.org/jsp/jstl/fmt"
	xmlns:composite="http://xmlns.jcp.org/jsf/composite"
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

<!-- INTERFACE -->
<!-- actions are: v view, e edit, c create, d delete,  -->
<composite:interface name="tileFull"
	shortDescription="Provides a top-aligned imaged followed by text.">
	<composite:attribute name="pubId" required="true" />
	<composite:attribute name="state" />
</composite:interface>

<!-- IMPLEMENTATION: REUSABLE FOR CREATE AND UPDATE ACTIONS-->
<composite:implementation
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">
		#{pubController.init(cc.attrs.pubId)}
	<c:set var="isToEdit" value="#{cc.attrs.state == 'E'}" />
	<c:set var="pubFormV" value="pubFormV" />
	<c:set var="pubFormE" value="pubFormE" />

	<h:form id="pubForm#{cc.attrs.state}">

		<div class="tile tileFull">

				<h:panelGroup rendered="#{isToEdit}">
					<!-- use this header to edit the content references-->
					<div id="editHeader">
						<div id="editHeaderTeaser" class="editHeaderElement">
							You have the privilege to edit this publication.
							<p />
							Caution, all modifications are saved on the fly.
						</div>

						<h:panelGroup styleClass="editHeaderElement metaAndReferenceData">
							<div class="title">
								Persisting This<br /> Publication
							</div>
							<div>
								<label title="State: #{pubController.state}">								
								<h:selectBooleanCheckbox id="userReadyToPersist"
										value="#{pubController.userReadyToPersist}">
										<a4j:ajax event="change" execute="@this" />
									</h:selectBooleanCheckbox>Save when possible.</label>
							</div>
							<div class="progress">
								<a4j:status id="status">
									<f:facet name="start">
										<div style="vertical-align: middle">
											<h:graphicImage value="/resources/media/icons/processing.gif"
												alt="Processing ..." style="vertical-align: middle;" />
											<span style="margin: 10px;">Processing ...</span>
										</div>
									</f:facet>
								</a4j:status>
							</div>
						</h:panelGroup>

						<div class="editHeaderElement metaAndReferenceData">
							<div class="title">
								Meta Data &amp; <br />References
							</div>

							<!-- Pub Category -->
							<ui:decorate
								template="/templates/decorators/editorSubElementTemplate.xhtml">
								<ui:param name="subElementName" value="PubCategory" />

								<ui:define name="title">
							Category
							</ui:define>

								<ui:define name="content">
									<h:selectOneMenu id="pubCategoryId"
										value="#{pubController.pubCategory}"
										converter="#{pubCategoryConverterController}">
										<f:selectItems
											value="#{listPubCategoryController.pubCategories}"
											var="category" itemLabel="#{category.name}"
											itemValue="#{category}" />
										<a4j:ajax event="change" execute="@this" />
									</h:selectOneMenu>
									<h:message for="pubCategoryId" />
								</ui:define>
							</ui:decorate>

							<!-- Severity Level -->
							<ui:decorate
								template="/templates/decorators/editorSubElementTemplate.xhtml">
								<ui:param name="subElementName" value="SeverityLevel" />

								<ui:define name="title">
							Severity Level
							</ui:define>

								<ui:define name="content">
									<rich:inputNumberSlider id="severityLevel"
										value="#{pubController.severityLevel}" minValue="1"
										maxValue="3" maxlength="1" style="width: 100px"
										enableManualInput="false"
										title="The severity level will influence display and order.">
										<a4j:ajax event="change" execute="@this" />
									</rich:inputNumberSlider>
								</ui:define>
							</ui:decorate>

							<!-- Pub Threads -->
							<ui:decorate
								template="/templates/decorators/editorSubElementTemplate.xhtml">
								<ui:param name="subElementName" value="PubThreads" />

								<ui:define name="title">
							Thread References
							</ui:define>
								<ui:define name="content">
									<rich:pickList converter="#{pubThreadConverterController}"
										value="#{pubController.pubThreads}" var="pubThread"
										listHeight="200px" listWidth="150px" sourceCaption="Available"
										targetCaption="Assigned to publication">
										<f:param name="pubId" value="#{pubController.id}" />
										<f:selectItems
											value="#{listPubThreadController.allPubThreads}" />
										<rich:column>
											<f:facet name="header">Thread</f:facet>
										#{pubThread.name}
									</rich:column>
										<a4j:ajax event="change" execute="@this" />
									</rich:pickList>
								</ui:define>
							</ui:decorate>

							<!-- Publication Image -->
							<ui:decorate
								template="/templates/decorators/editorSubElementTemplate.xhtml">
								<ui:param name="subElementName" value="Image" />

								<ui:define name="title">
							Header Image(s)
							</ui:define>

								<ui:define name="content">

									<a4j:region>
										<h:panelGrid columns="1" columnClasses="top">

											<rich:fileUpload noDuplicate="true"
												title="You may add only one Header picture."
												fileUploadListener="#{pubController.imageUploadController.listener}"
												id="headerUpload" acceptedTypes="jpg, gif, png"
												ontyperejected="alert('Only JPG, GIF and PNG files are accepted');"
												maxFilesQuantity="1" style="width: 240px; height: 95px;">
												<a4j:ajax event="uploadcomplete" execute="@none" />

											</rich:fileUpload>
											<h:message for="headerUpload" />

											<h:inputTextarea id="imageCaption" style="width:240px;"
												value="#{pubController.headerImageCaption}">
												<rich:placeholder value="Add a text caption to this image." />
											</h:inputTextarea>

											<a4j:commandButton
												action="#{pubController.acceptHeaderImage()}"
												value="Accept Header Image" render="headerImage" />
										</h:panelGrid>
									</a4j:region>

								</ui:define>
							</ui:decorate>
						</div>
					</div>
				</h:panelGroup>



			<div class="image">
				<h:panelGroup id="headerImage"
					rendered="#{pubController.headerImageAvailable}">

					<a4j:mediaOutput id="headerImg"
						fileName="#{pubController.headerImage.name}" element="img"
						session="false"
						createContent="#{imageController.paintHeaderImage}"
						value="#{pubController.headerImage.id}"
						mimeType="#{pubController.headerImage.mimeType}"
						alt="#{pubController.headerImage.title}" cacheable="true" />

					<script>
					var hImg = #{rich:element("headerImg")};
					$(hImg).capty({
						  animation: 'slide',
						  speed:     400,
						  height:    100,
						  sufix: '<p style="font-size:xx-small;">Please contact for copyright information</p>' 
						});	
					</script>

				</h:panelGroup>
			</div>

			<div class="content">

				<mywidgets:inlineEditor fieldProperty="#{pubController.title}"
					fieldName="Title" placeHolder="Please type a catchy title." />

				<div class="metaData">

					<mywidgets:inlineDatePicker
						fieldProperty="#{pubController.dateOfPub}" fieldName="DateOfPub"
						styleClass="metaDataElement" />

					<mywidgets:inlineEditor fieldProperty="#{pubController.location}"
						fieldName="Location" styleClass="metaDataElement"
						placeHolder="Please type a location. Preferably a city." />
					<mywidgets:inlineEditor
						fieldProperty="#{pubController.mediaSource}"
						fieldName="MediaSource" styleClass="metaDataElement"
						placeHolder="Please type a media source type like Blog or Article." />
				</div>
				<div class="teaser">
					<mywidgets:inlineEditor fieldProperty="#{pubController.teaser}"
						fieldName="Teaser" placeHolder="Please type a consise teaser." />
				</div>
				<div class="article">
					<mywidgets:inlineEditor fieldProperty="#{pubController.article}"
						fieldName="Article" placeHolder="Please type a brisk article." />
				</div>

			</div>
		</div>
	</h:form>
</composite:implementation>
</html>